//ul的id要命名为：id = tabItem.prefix + ‘-list’
//放置标签页内容div的id要命名为：id = tabItem.prefix + ‘-content’
var closableTab = {

    //添加tab
    addTab: function (tabItem) { //tabItem = {prefix, suffixId, tabName, closable}

        var id = tabItem.prefix + "_seed_" + tabItem.suffixId;
        var container = tabItem.prefix + "_container_" + tabItem.suffixId;

        $("li[id^='" + tabItem.prefix + "_seed_']").removeClass("active").children('a').removeClass("active");
        $("div[id^='" + tabItem.prefix + "_container_']").removeClass("active");

        if (!$('#' + id)[0]) {
            var li_tab = '<li role="presentation" class="nav-item" id="' + id + '" suffixId="' + tabItem.suffixId + '" prefix="' + tabItem.prefix + '"><a href="#'
                + container + '"  role="tab" data-toggle="tab" style="position: relative;" '
                + 'class="nav-link" suffixId="' + tabItem.suffixId + '" prefix="' + tabItem.prefix + '" >' + tabItem.tabName;

            if (tabItem.closable) {
                li_tab = li_tab + '<span class="fa fa-times text-muted" suffixId="' + tabItem.suffixId + '" ' +
                    'prefix="' + tabItem.prefix + '" style="position: absolute;right:4px;top: 4px"  onclick="closableTab.closeTab(this)"></span></a></li> ';
            } else {
                li_tab = li_tab + '</a></li>';
            }

            var tabPanel = '<div role="tabPanel" class="tab-pane card" id="' + container + '" style="width: 100%;border:0px" suffixId="'
                + tabItem.suffixId + '" prefix="' + tabItem.prefix + '"></div>';

            $('#' + tabItem.prefix + '-list').append(li_tab);
            $('#' + tabItem.prefix + '-content').append(tabPanel);
        }

        $("#" + id).addClass("active").children('a').addClass("active");
        $("#" + container).addClass("active");

    },

    //关闭tab
    closeTab: function (item) {

        //阻止冒泡
        var e = window.event || arguments.callee.caller.arguments[0];
        e.preventDefault();
        e.stopPropagation();

        var suffixId = $(item).attr('suffixId');
        var prefix = $(item).attr('prefix');
        var listId = prefix + "_seed_" + suffixId;
        var containerId = prefix + "_container_" + suffixId;

        if ($('#' + containerId).hasClass('active')) {
            $('#' + listId).prev().addClass('active').children("a").addClass('active');
            $('#' + containerId).prev().addClass('active');
        }

        $("#" + listId).remove();
        $("#" + containerId).remove();
    }

}